<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><title>Vue Todo Tutorial</title>
    <style>
        .empty {
            border-color: red;
        }
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
<body>
<div id="app">
    <input type="text" placeholder="添加 todo" v-bind:class='{empty: emptyChecked}' v-model="newTodoTitle"  @keyup.enter="addTodo" />
    <span v-if="emptyChecked" style="color: red">请输入内容！</span>

    <ul>
        <li v-for='todo in todos' :key='todo.id'>
            <span :class="{completed: todo.completed === 1}" >{{ todo.title }}</span>
            <input type="button" value="标为完成" @click="markAsCompleted(todo)" v-if="!todo.completed">
            <input v-else type="button" value="取消完成"  @click="markAsUncompleted(todo)"/>
            <input type="button" value="删除" @click="removeTodo(todo)" >

            <input type="text" value="编辑 todo..." />
        </li>
    </ul>
    <div v-if="hasRemovedTodo">
        <br>
        <input type="button" value="撤销" @click="restoreTodo()"/>
    </div>
</div>


</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    let id = 0;
    var app = new Vue({
        el: '#app',
        data: function () {
            return {
                todos: [],
                newTodoTitle: '',
                checkEmpty: false,
                removedTodo: null
            }
        },
        methods: {
            addTodo: function () {
                if (this.newTodoTitle === '') {
                    this.checkEmpty = true;
                    return;
                }
                /*this.todos.push({
                    id: id++,
                    title: this.newTodoTitle,
                    completed: false
                });*/
                let todo = {
                    title: this.newTodoTitle,
                    completed: 0
                }
                axios.post("http://127.0.0.1:9000/todo",todo).then(rsp=>{
                    console.log(rsp.data);
                    this.getAllTodo();
                    this.newTodoTitle = ''
                })
            },
            markAsCompleted: function (todo) {
                todo.completed = 1
                axios.put("http://127.0.0.1:9000/todo/"+todo.id,todo).then(rsp=>{
                    console.log(rsp.data);
                    this.getAllTodo();
                })
            },
            markAsUncompleted: function (todo) {
                todo.completed = 0
                axios.put("http://127.0.0.1:9000/todo/"+todo.id,todo).then(rsp=>{
                    console.log(rsp.data);
                    this.getAllTodo();
                })
            },
            removeTodo: function (todo) {
                // let pos = this.todos.indexOf(todo);
                // this.removedTodo = {
                //     pos: pos,
                //     todo: this.todos.splice(pos, 1)[0]
                // };
                axios.delete("http://127.0.0.1:9000/todo/" + todo.id,todo).then(rsp=>{
                    console.log(rsp.data);
                    this.getAllTodo();
                })
            },
            restoreTodo: function () {
                let pos = this.removedTodo.pos;
                let restored = this.removedTodo.todo;
                this.todos.splice(pos, 0, restored);
                this.removedTodo = null;
            },
            getAllTodo:function(){
                axios.get("http://127.0.0.1:9000/todo").then(rsp=>{
                    this.todos = rsp.data.data
                })
            },
            add:function(){
                axios.post("http://127.0.0.1:9000/todo").then(rsp=>{
                    this.todos = rsp.data.data
                })
            }
        },
        computed: {
            emptyChecked: function () {
                return this.newTodoTitle.length === 0 && this.checkEmpty;
            },
            hasRemovedTodo: function () {
                return !!this.removedTodo
            }
        },
        mounted:function(){
           this.getAllTodo();
        }
    })
</script>
</html>